<template>
    <div class="login-box">
        <h1>叩丁狼商品管理系统</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="0" class="demo-ruleForm">
            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" autocomplete="off" :prefix-icon="UserFilled" size="large"
                    placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock"
                    size="large" placeholder="请输入用密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { UserFilled, Lock } from "@element-plus/icons-vue";
import { user } from "@/request"
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";

const router = useRouter()
const userStore = useUserStore()

const ruleFormRef = ref<FormInstance>();

// 自定义的规则是一个函数 ， rule - 规则 ， value - 输入框的值 , callback -
const validatePass = (rule: any, value: string, callback: any) => {
    if (value === "") {
        // 如果不通过校验，需要 callback里面传入一个错误对象
        callback(new Error("密码不能为空"));
    } else {
        // 如果校验通过，就直接调用 callback就行
        callback();
    }
};

const ruleForm = reactive({
    username: "",
    password: "",
});

const rules = reactive({
    username: [
        // 非空验证
        // blur 失焦事件
        { required: true, message: "用户名不能为空", trigger: "blur" },
        // 控制输入的长度 在 min 到 max 之间
        // { min: 3, max: 12, message: "用户名要在3到12之间", trigger: "blur" },
    ],
    password: [{ validator: validatePass, trigger: "blur" }],
});

// fromEl 是一个ref对象，得到了 from 组件的实例
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    // validate - 
    formEl.validate((valid) => {
        // valid 是一个布尔值,表示表单验证是否通过
        // if (valid) {
        //     console.log("submit!");
        // } else {
        //     console.log("error submit!");
        //     // 如果返回false 会出现相应的提示
        //     return false;
        // }

        if (!valid) return false

        // * 里面所有的按需导出整合到一起成一个对象
        // 所以这里导入的是一个对象
        user.loginApi(ruleForm).then(res => {
            if (res.code === 200) {
                // 存储token
                localStorage.setItem("token", res.data.tokenHead + res.data.token)
                // 提示用户登录成功
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                // 这里两种写法都是可以的
                // ElMessage.success("登录成功");

                // // 发送请求请求用户信息
                // user.userInfoApi().then(res => {
                //     if (res.code === 200) {
                //         // console.log(res.data.menus);
                //         userStore.menus = res.data.menus
                //     }
                // })

                // 现在动态的菜单的做法，应该是，把 后端返回的 菜单数据， 做成 父子关系
                // 大致的结构应该是下面这样
                // const menus = [
                //   {
                //     name: "商品",
                //     children: [
                //       "商品列表","..."
                //     ]
                //   }
                // ];
                // 所以要想办法把 一级菜单识别出来， 再识别出对应的一级菜单 对应的 二级菜单
                // 现在的做法是 ： 对象的 parentId 属性，如果是0，就是一级
                // 二级菜单的paretnId 就是对应的 一级菜单的id
                // 所以，
                // 1. 先找出所有的一级菜单，放到一个数组里面
                // 2. 再找出所有二级菜单，放到对应的一级菜单的 children 数组里面
                // 3. v-for 双层遍历生成对应的菜单

                // 跳转到主页
                // router.push("/home")
                // 登录成功之后需要默认跳转到Index
                router.push("/index")
            }
        })
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style lang="less" scoped>
.login-box {
    width: 350px;
    margin: 0 auto;
    padding-top: 200px;

    h1 {
        font-size: 32px;
    }

    .el-button {
        width: 100%;
    }

    :deep(.el-input__wrapper) {
        background-color: #242424;
    }

    :deep(.el-input__inner) {
        color: #fff;
    }
}
</style>